<script setup lang="ts">
import { reactive, ref, watch } from "vue";

const shopCar = reactive([
  {
    bkName: "三国演义",
    singlePrice: 23,
    count: 1,
    allPrice: 23,
  },
  {
    bkName: "水浒传",
    singlePrice: 22,
    count: 1,
    allPrice: 22,
  },
]);

const allBookPrice = ref(0);
const changeCount = (index: number, num: number) => {
  shopCar[index].count += num;
  shopCar[index].allPrice = shopCar[index].singlePrice * shopCar[index].count;
  if (shopCar[index].count === 0) shopCar.splice(index, 1);
  changeAllPrice();
};
const changeAllPrice = () => {
  let sum = 0;
  for (const item of shopCar) {
    sum += item.allPrice;
  }
  allBookPrice.value = sum;
};
changeAllPrice();
</script>

<template>
  <div class="content">
    <ul class="ulTop">
      <li><input type="checkbox" name="" id="" value="" /><span class="space"></span>全选</li>
      <li>商品信息</li>
      <li>单价（元）</li>
      <li>数量</li>
      <li>金额</li>
      <li>操作</li>
    </ul>
    <table>
      <tr class="goods" v-for="(item, index) in shopCar" :key="index">
        <td class="select"><input type="checkbox" name="" id="" value="" /></td>
        <td class="bkInfo">{{ item.bkName }}</td>
        <td class="price">￥{{ item.singlePrice }}</td>
        <td class="addMinus">
          <button id="minusBtn" @click="changeCount(index, -1)">-</button>
          <input type="text" name="" id="bknum" v-model="item.count" />
          <button id="addBtn" @click="changeCount(index, 1)">+</button>
        </td>
        <td class="numPrice">￥{{ item.allPrice }}</td>
        <td class="do">移入收藏<br />删除</td>
      </tr>
    </table>
    <ul class="ulBot">
      <li><input type="checkbox" name="" id="" value="" /><span class="space"></span>全选</li>
      <li>批量删除</li>
      <li>已选择1件商品</li>
      <li></li>
      <li>总计：{{ allBookPrice }}</li>
      <li><button id="staBtn">结算</button></li>
    </ul>
  </div>
  <div class="clear"></div>
</template>

<style scoped>
@import "./css/reset.css";
@import "./css/HeaAndFoo.css";
@import "./css/jquery-ui.theme.min.css";
@import "./css/jquery-ui.min.css";

.ulTop,
.ulBot,
table {
  width: 960px;
  height: 50px;
  margin: 0px auto;
  color: #646464;
}

table {
  height: 100%;
}

.ulTop > li,
.ulBot > li {
  float: left;
  width: 160px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.goods {
  display: block;
  width: 958px;
  height: 123px;
  border: 1px solid #ccc;
  background-color: #fafafa;
}

.select,
.bkInfo,
.price,
.numPrice,
.do {
  width: 160px;
  height: 123px;
  text-align: center;
}
.addMinus {
  width: 180px;
  height: 123px;
  text-align: center;
}

#bknum {
  width: 35px;
  height: 34px;
  text-align: center;
  border-top: 1px solid #848484;
  border-bottom: 1px solid #848484;
  border-left: none;
  border-right: none;
}

#addBtn,
#minusBtn {
  width: 35px;
  height: 34px;
}

#staBtn {
  width: 120px;
  height: 40px;
  font-size: 18px;
  background-color: #ff2832;
  color: #fff;
  border: none;
  border-radius: 6px;
}
</style>
